<template>
    <!-- 办事指南 -->
    <div class="app-container">
        <div class="baAdd">
            <div class="baAddLeft">
                <!-- <el-steps direction="vertical" :active="stepActive">
                    <el-step title="基础信息"></el-step>
                    <el-step title="运输管理措施"></el-step>
                    <el-step title="消纳处置信息"></el-step>
                    <el-step title="附件上传"></el-step>
                </el-steps> -->
                <div class="baAddLeftTitle" @click="scrollCS('itemInfo1')">项目信息</div>
                <div class="baAddLeftTitle" @click="scrollCS('itemInfo2')">施工单位信息</div>
                <div class="baAddLeftTitle" @click="scrollCS('itemInfo3')">建设单位信息</div>
                <!-- <div class="baAddLeftTitle" @click="scrollCS('itemInfo4')">项目位置</div> -->
                <div class="baAddLeftTitle" @click="scrollCS('itemInfo5')">建筑垃圾处理方案</div>
                <div class="baAddLeftTitle" @click="scrollCS('itemInfo6')">运输管理措施</div>
                <div class="baAddLeftTitle" @click="scrollCS('itemInfo7')">附件信息</div>
            </div>
            <div class="baAddRight" ref="basicAll">
                <div class="baAddRightBasic">
                    <div class="basicCell">
                        <el-form ref="formBasic" :rules="rulesBasic" label-width="150px">
                            <div class="basicSubtitle" ref="itemInfo1">项目信息</div>
                            <el-row>
                                <el-col :span="8">
                                <el-form-item label="工程名称:" prop="name"> {{formData.name}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                <el-form-item label="工程类别:" prop="type"> {{formData.typeGC}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="工程地址:" prop="constructionUnit"> {{formData.gcdz}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="工程规模:" prop="constructionUnit"> {{formData.gcgm}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="开工时间:" prop="constructionUnit"> {{formData.kgsj}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="竣工时间:" prop="constructionUnit"> {{formData.jgsj}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="项目级别:" prop="constructionUnit"> {{formData.xmjb}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属市:" prop="constructionUnit"> {{formData.cityCode}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所属区/县:" prop="constructionUnit"> {{formData.areaCode}} </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="basicSubtitle" ref="itemInfo2">施工单位信息</div>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="施工单位:" prop="name"> {{formData.sgdw}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="单位类型:" prop="type"> {{formData.dwlx}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="申请人:" prop="constructionUnit"> {{formData.sqr}} </el-form-item>
                                </el-col>
                                <!-- <el-col :span="8">
                                    <el-form-item label="单位负责人" prop="constructionUnit"></el-form-item>
                                </el-col> -->
                                <el-col :span="8">
                                    <el-form-item label="申请人联系电话:" prop="constructionUnit"> {{formData.sqrlxdh}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="社会信用代码:" prop="constructionUnit"> {{formData.shxydm}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="施工单位负责人:" prop="constructionUnit"> {{formData.sgdwfzr}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="工地负责人联系电话:" prop="constructionUnit"> {{formData.gdfzrlxdh}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="建筑垃圾处理负责人:" prop="constructionUnit"> {{formData.jzljclfzr}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="垃圾负责人联系电话:" prop="constructionUnit"> {{formData.ljfzrdh}} </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="basicSubtitle" ref="itemInfo3">建设单位信息</div>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="单位名称:" prop="name"> {{formData.dwmc}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="负责人:" prop="type"> {{formData.dwfzr}} </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="联系电话:" prop="dwfzrdh"> {{formData.dwfzrdh}} </el-form-item>
                                </el-col>
                            </el-row>
                            
                            <!-- <div class="basicSubtitle" ref="itemInfo4">项目位置</div>
                            <div class="basicFence">

                            </div> -->
                        </el-form>
                    </div>
                </div>
                <div class="baAddRightBasic">
                    <div class="basicCell">
                            <div class="basicSubtitle" ref="itemInfo5">建筑垃圾处理方案</div>
                            
                        <el-form ref="formWeightInfo" :model="formData" label-width="150px">
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="产生总量（t）:" prop="name">
                                        <span>{{formData.residueWeightInfoTotal}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- <div class="basicSubtitle" style="display: flex;"> <el-input v-model="formData.residueWeightInfoTotal" /></div> -->
                            <div class="basicSubtitleS">工程渣土</div>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="产生总量（t）:" prop="name">
                                        <span>{{formData.residueWeightInfoTotal}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div v-for="(item, index) in formData.residueWeightInfoList" :key="index">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '量(t):'">
                                            <span>{{item.weight}}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '地点：'">
                                            <span>{{item.constructionFactoryId}}</span>
                                        </el-form-item>
                                    </el-col>
                                    
                                    <el-col :span="8" style="padding: 0 10px;">
                                        <el-form-item label="计划时间：">
                                            <span>{{item.startTm}} 至 {{item.endTm}}</span>
                                        </el-form-item>
                                        <!-- <span>2021-01-01 - 2025-01-01</span> -->
                                        <!-- <span>{{  }}</span> -->
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="basicSubtitleS">工程泥浆</div>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="产生总量（t）:" prop="name">
                                        <span>{{formData.residueWeightInfoTotal2}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div v-for="(item, index2) in formData.residueWeightInfoList2" :key="index2">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '量(t):'">
                                            <span>{{item.weight}}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '地点：'">
                                            <span>{{item.constructionFactoryId}}</span>
                                        </el-form-item>
                                    </el-col>
                                    
                                    <el-col :span="8" style="padding: 0 10px;">
                                        <el-form-item label="计划时间：">
                                            <span>{{item.startTm}} 至 {{item.endTm}}</span>
                                        </el-form-item>
                                        <!-- <span>{{  }}</span> -->
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="basicSubtitleS">拆除垃圾</div>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="产生总量（t）:" prop="name">
                                        <span>{{formData.residueWeightInfoTotal3}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div v-for="(item, index3) in formData.residueWeightInfoList3" :key="index3">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '量(t):'">
                                            <span>{{item.weight}}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '地点：'">
                                            <span>{{item.constructionFactoryId}}</span>
                                        </el-form-item>
                                    </el-col>
                                    
                                    <el-col :span="8" style="padding: 0 10px;">
                                        <el-form-item label="计划时间：">
                                            <span>{{item.startTm}} 至 {{item.endTm}}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="basicSubtitleS">装修垃圾</div>
                            <el-row>
                                <el-col :span="10">
                                    <el-form-item label="产生总量（t）:" prop="name">
                                        <span>{{formData.residueWeightInfoTotal4}}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div v-for="(item, index4) in formData.residueWeightInfoList4" :key="index4">
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '量(t):'">
                                            <span>{{item.weight}}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item :label="item.disposalTypeDesc + '地点：'">
                                            <span>{{item.constructionFactoryId}}</span>
                                        </el-form-item>
                                    </el-col>
                                    
                                    <el-col :span="8" style="padding: 0 10px;">
                                        <el-form-item label="计划时间：">
                                            <span>{{item.startTm}} 至 {{item.endTm}}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                            
                        </el-form>
                        <!-- <el-form ref="formBasic" :rules="rulesBasic" label-width="120px">
                            <div class="basicSubtitle" id="section6">消纳处置信息基</div>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="省份" prop="name"> </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="城市" prop="name"> </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="区/县" prop="name"></el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="处置场所类型" prop="name"></el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="处置场所名称" prop="name"> </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="处置场所地址" prop="name"> </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="负责人姓名" prop="name"> </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="负责人联系电话" prop="name"> </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="企业名称" prop="name"> </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="basicSubtitle" id="section7">建筑垃圾处置信息</div>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="工程渣土类型" prop="name"> </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="工程泥浆:" prop="type">
                                        <div class="cll">
                                            <span class="cllSpan">处置场所剩余处理量： 5000吨</span>
                                            <el-input v-model="formData.name" placeholder="请输入处理量" />
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="工程垃圾:" prop="type">
                                        <div class="cll">
                                            <span class="cllSpan">处置场所剩余处理量： 5000吨</span>
                                            <el-input v-model="formData.name" placeholder="请输入处理量" />
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="拆除垃圾:" prop="type">
                                        <div class="cll">
                                            <span class="cllSpan">处置场所剩余处理量： 5000吨</span>
                                            <el-input v-model="formData.name" placeholder="请输入处理量" />
                                        </div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="装修垃圾:" prop="type">
                                        <div class="cll">
                                            <span class="cllSpan">处置场所剩余处理量： 5000吨</span>
                                            <el-input v-model="formData.name" placeholder="请输入处理量" />
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form> -->
                    </div>
                </div>
                <div class="baAddRightBasic">
                    <div class="basicCell">
                        <div class="basicCellTitle" ref="itemInfo6">运输管理措施</div>
                        
                                <el-table border fit empty-text="暂无数据" :data="formData.tableDataTrans">
                                    <el-table-column label="运输公司名称" align="center" prop="nameGS" />
                                    <el-table-column label="负责人" align="center" prop="userName" />
                                    <el-table-column label="联系电话" align="center" prop="phone"/>
                                    <!-- <el-table-column label="运输路线" align="center" prop="areaName" width="80" /> -->
                                    <el-table-column label="车辆信息" align="center" prop="carInfor" />
                                    <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" >
                                        <template slot-scope="scope">
                                        <el-button size="mini" type="text" icon="el-icon-edit" @click="updateTrans(scope.row, scope.$index)" >修改</el-button>
                                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteTrans(scope.row, scope.$index)" >删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                        
                        <el-dialog :title="titleTrans" :visible.sync="openTrans" width="800px" append-to-body>
                            <el-form ref="formBasic" :rules="rulesTrans" label-width="100px">
                                <div class="basicSubtitle">基础信息</div>
                                <el-row>
                                    <el-col :span="12">
                                    <el-form-item label="运输公司名称" prop="name">
                                        <el-input v-model="formDataTrans.nameGS" placeholder="请输入工地名称" />
                                    </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                    <el-form-item label="负责人" prop="userName">
                                        <el-input v-model="formDataTrans.userName" placeholder="请输入建设单位" />
                                    </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="联系电话" prop="phone">
                                            <el-input v-model="formDataTrans.phone" placeholder="请输入建设单位" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="车辆信息" prop="carInfor">
                                            
                                            <el-select class="fillUp" v-model="formDataTrans.carInfor" clearable placeholder="请选择工地类型">
                                                <el-option
                                                    v-for="(v,index) in carInforList"
                                                    :key="index"
                                                    :label="v.label"
                                                    :value="v.value"
                                                ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="运输路线" prop="transLine">
                                            <el-input v-model="formDataTrans.transLine" placeholder="请输入建设单位" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="submitTrans">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
                <div class="baAddRightBasic">
                    <div class="basicCell">
                        <div class="basicSubtitle" ref="itemInfo7">附件列表</div>
                        <div class="fillDetailL">
                                <el-tabs tab-position="left" style="height: 300px;">
                                    <el-tab-pane label="申请表">
                                        <div class="fileListDesc">
                                            <div class="fileListDescItem" v-for="(item, i) in formData.fileList1" :key="i">
                                                <div class="fileLDItemLeft"><span class="fileLDItemLeftT">{{ item.name }}</span><span>{{ item.size }}</span></div>
                                                <div class="fileLDItemRight">
                                                    <el-button type="primary" round size="mini">预览</el-button>
                                                    <el-button type="primary" round size="mini">下载</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="处理方案">
                                        <div class="fileListDesc">
                                            <div class="fileListDescItem" v-for="(item, i) in formData.fileList2" :key="i">
                                                <div class="fileLDItemLeft"><span class="fileLDItemLeftT">{{ item.name }}</span><span>{{ item.size }}</span></div>
                                                <div class="fileLDItemRight">
                                                    <el-button type="primary" round size="mini">预览</el-button>
                                                    <el-button type="primary" round size="mini">下载</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="相关证件">
                                        <div class="fileListDesc">
                                            <div class="fileListDescItem" v-for="(item, i) in formData.fileList3" :key="i">
                                                <div class="fileLDItemLeft"><span class="fileLDItemLeftT">{{ item.name }}</span><span>{{ item.size }}</span></div>
                                                <div class="fileLDItemRight">
                                                    <el-button type="primary" round size="mini">预览</el-button>
                                                    <el-button type="primary" round size="mini">下载</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="运输单位意向书">
                                        <div class="fileListDesc">
                                            <div class="fileListDescItem" v-for="(item, i) in formData.fileList4" :key="i">
                                                <div class="fileLDItemLeft"><span class="fileLDItemLeftT">{{ item.name }}</span><span>{{ item.size }}</span></div>
                                                <div class="fileLDItemRight">
                                                    <el-button type="primary" round size="mini">预览</el-button>
                                                    <el-button type="primary" round size="mini">下载</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="处置单位委托意向书">
                                        <div class="fileListDesc">
                                            <div class="fileListDescItem" v-for="(item, i) in formData.fileList5" :key="i">
                                                <div class="fileLDItemLeft"><span class="fileLDItemLeftT">{{ item.name }}</span><span>{{ item.size }}</span></div>
                                                <div class="fileLDItemRight">
                                                    <el-button type="primary" round size="mini">预览</el-button>
                                                    <el-button type="primary" round size="mini">下载</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane label="其他材料">
                                        <div class="fileListDesc">
                                            <div class="fileListDescItem" v-for="(item, i) in formData.fileList6" :key="i">
                                                <div class="fileLDItemLeft"><span class="fileLDItemLeftT">{{ item.name }}</span><span>{{ item.size }}</span></div>
                                                <div class="fileLDItemRight">
                                                    <el-button type="primary" round size="mini">预览</el-button>
                                                    <el-button type="primary" round size="mini">下载</el-button>
                                                </div>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>
                                
                            <!-- <div class="fillDetailLi"></div>
                                <div class="FileDImg"></div>
                                <div class="FileDTitle"></div>
                                <div class="FileDSize"></div>
                                <div class="FileDDown"></div>
                            </div> -->
                        </div>
                        <el-dialog :title="titleFiles" :visible.sync="openFile" width="500px" append-to-body>
                            <el-form ref="formBasic" :rules="rulesFile" label-width="100px">
                                <div class="basicSubtitle">文件信息</div>
                                <el-row>
                                    <el-col :span="24">
                                    <el-form-item label="文件名称" prop="name">
                                        <el-select class="fillUp" v-model="formFile.name" clearable placeholder="请选择文件名称">
                                            <el-option v-for="(v,index) in nameFileList" :key="index" :label="v.label" :value="v.value" ></el-option>
                                        </el-select>
                                    </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="文件类型" prop="type">
                                        <el-select class="fillUp" v-model="formFile.type" clearable placeholder="请选择文件名称">
                                            <el-option v-for="(v,index) in fileTypeList" :key="index" :label="v.label" :value="v.value" ></el-option>
                                        </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="文件上传" prop="fileUrl">
                                           <FileUpload v-model="formFile.fileUrl" :limit="1" :fileSize="10" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="submitFile">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>

    </div>
  </template>
  
  <script>
  export default {
    name: "Record",
    components: {  },
    data() {
      return {
        stepActive: 0, // 进度
        totalAllCount: 1000,
        formData: {
            name: "工程名称", // 工程名称
            typeGC: "工程类别", // 工程类别
            gcdz: "工程地址", // 工程地址
            gcgm: "工程规模", // 工程规模
            kgsj: "开工时间", // 开工时间
            jgsj: "竣工时间", // 竣工时间
            xmjb: "项目级别", // 项目级别
            cityCode: "所属市", // 所属市
            areaCode: "所属区/县", // 所属区/县
            // 施工单位
            sgdw: "施工单位", // 施工单位
            dwlx: "单位类型", // 单位类型
            sqr: "申请人", // 申请人
            sqrlxdh: "申请人联系电话", // 申请人联系电话
            shxydm: "社会信用代码", // 社会信用代码
            sgdwfzr: "施工单位负责人", // 施工单位负责人
            gdfzrlxdh: "工地负责人联系电话", // 工地负责人联系电话
            jzljclfzr: "建筑垃圾处理负责人", // 建筑垃圾处理负责人
            ljfzrdh: "垃圾负责人联系电话", // 垃圾负责人联系电话
            dwmc: "单位名称", // 单位名称
            dwfzr: "负责人", // 负责人
            dwfzrdh: "联系电话", // 联系电话


            
            // 建筑垃圾处理方案 ======================================
            residueWeightInfoTotal: 50,
            residueWeightInfoTotal2: 120,
            residueWeightInfoTotal3: 44,
            residueWeightInfoTotal4: 40,
            residueWeightInfoList: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "就地利用",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "外运处置",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "土方平衡",
                disposalType: "EARTHWORK_BALANCE",
                disposalTypeDesc: "土方平衡",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],
            residueWeightInfoList2: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "就地利用",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "外运处置",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],
            residueWeightInfoList3: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "就地利用",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "外运处置",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],
            residueWeightInfoList4: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "就地利用",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: 1,
                constructionFactoryName: "外运处置",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],


            // 运输管理措施 =========================================
            tableDataTrans: [{
                nameGS: '运输公司名称', // 运输公司名称
                userName: '负责人', // 负责人
                phone: '联系电话', // 联系电话
                carInfor: '车辆信息', // 车辆信息
                transLine: null, // 
            }],

        },
        formData1: { // 表单数据
            // 基本信息
            name: '', // 工程名称
            type: '', // 工程类别
            xmjb: "", // 项目级别

            // 建筑垃圾处理方案 ======================================
            residueWeightInfoTotal: null,
            residueWeightInfoTotal2: null,
            residueWeightInfoTotal3: null,
            residueWeightInfoTotal4: null,
            residueWeightInfoList: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "EARTHWORK_BALANCE",
                disposalTypeDesc: "土方平衡",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],
            residueWeightInfoList2: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],
            residueWeightInfoList3: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],
            residueWeightInfoList4: [{ // 工程渣土
                constructionFactoryId: null,
                constructionFactoryName: "",
                disposalType: "SPOT_UTILIZATION",
                disposalTypeDesc: "就地利用",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            },{
                constructionFactoryId: 1,
                constructionFactoryName: "cs",
                disposalType: "OUTBOUND_DISPOSAL",
                disposalTypeDesc: "外运处置",
                weight: 0,
                updateTm: '2024-01-01',
                startTm: '2024-01-01',
                endTm: '2025-01-01',
            }],


            // 运输管理措施 =========================================
            tableDataTrans: [], // 

            // 附件上传 ========================
            fileList1: [{
                name: "申请表.pdf",
                size: "125kb",
                url: "",
            }],
            fileList2: [{
                name: "处理方案.pdf",
                size: "125kb",
                url: "",
            }],
            fileList3: [{
                name: "身份证1.jpg",
                size: "125kb",
                url: "",
            },{
                name: "身份证2.jpg",
                size: "125kb",
                url: "",
            }],
            fileList4: [{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            }],
            fileList5: [{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            }],
            fileList6: [{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            },{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            },{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            },{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            },{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            },{
                name: "运输单位意向书.pdf",
                size: "125kb",
                url: "",
            }],
        }, 
        // 基本信息
        rulesBasic: null, // 校验
        // 运输公司字段信息 ====================
        titleTrans: '', // 弹窗标题
        openTrans: false, // 
        formDataTrans: { },
        carInforList: [], // 
        rulesTrans: {},
        indexTrans: '',

        // 文件上传
        fileTypeList: [
            { label: '文件', value: '1' },
            { label: '图片', value: '2' }
        ],
        nameFileList: [
            { label: '申请表', value: '1' },
            { label: '建筑垃圾处理方案', value: '2' },
            { label: '相关证件', value: '3' },
            { label: '运输单位委托意向书', value: '4' },
            { label: '处置单位委托意向书', value: '5' },
            { label: '相关材料', value: '6' },
        ],
        titleFiles: "上传文件",
        openFile: false, // 弹窗显示隐藏
        formFile: {
            name: '', // 文件名称
            type: null, // 文件类型
            fileUrl: null, // 上传地址
        },
        rulesFile: [],

      };
    },
    created() {
        console.log(this.$route.query, 329)
    },
    methods: {
        // 描点 ===========
        scrollCS(val){
            const targetElement = this.$refs[val];
            const scrollContainer = this.$refs.basicAll;
            console.log(targetElement.offsetTop, 'targetElement')
            console.log(scrollContainer.offsetTop, 'scrollContainer')
            // 计算滚动位置（这里简单设置为滚动到目标元素的顶部）
            const scrollPosition = targetElement.offsetTop - scrollContainer.offsetTop;
            
            // 滚动到指定位置
            scrollContainer.scrollTop = scrollPosition;
        },
        // 运输管理措施方法------------------
        // 添加
        addTrans(){
            this.titleTrans = '新增运输公司信息';
            this.openTrans = true
            this.indexTrans = null
            this.formDataTrans = {
                nameGS: '',
                userName: '',
                phone: '',
                carInfor: '',
                transLine: null,
            }
        },
        // 修改
        updateTrans(val, index){
            this.titleTrans = '修改运输公司信息';
            this.openTrans = true
            this.indexTrans = index
            let valForm = JSON.stringify(val)
            this.formDataTrans = JSON.parse(valForm)
        },
        // 删除
        deleteTrans(val, index){
            this.formData.tableDataTrans.splice(index, 1);
        },
        submitTrans(){
            this.openTrans = false
        },
        // ======================
        // 文件上传 =========================
        
        submitFile(){
            this.openFile = false
        }
    }
  };
  </script>
  
  <style scoped lang="scss" >
    .app-container{
       .baAdd{
        display: flex;
        .baAddLeft{
            width: 200px;
            max-height: 350px;
            .baAddLeftTitle{
                font-size: 16px;
                font-weight: normal;
                line-height: 24px;
                letter-spacing: 0px;
                color: #000000;
                padding: 10px 0;
            }
        }
        .baAddRight{
            width: calc(100% - 200px);
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            letter-spacing: 0px;
            height: calc(100vh - 150px);
            overflow: auto;


            .baAddRightBasic{
                padding-bottom: 60px;
                .basicCellTitle{
                    font-size: 24px;
                    font-weight: bold;
                    line-height: 32px;
                    padding: 10px 0;
                }
                .basicSubtitle{
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 28px;
                    letter-spacing: 0px;
                    padding: 10px 0;
                }
                .basicSubtitleS{
                    font-size: 14px;
                    padding: 10px 0;
                }
                .basicFence{
                    width: 100%;
                    min-height: 300px;
                    border: 1px solid;
                    border-radius: 5px;
                }
                .basicCell{
                    .fileListDesc{
                        width: 100%;
                        max-height: 300px;
                        padding: 10px;
                        display: flex;
                        flex-wrap: wrap;
                        overflow: auto;
                        .fileListDescItem{
                            display: flex;
                            justify-content: space-between;
                            padding: 20px;
                            min-width: 45%;

                            border: 1px solid #666;
                            margin: 10px;
                            border-radius: 10px;
                            justify-content: space-between;
                            .fileLDItemLeft{
                                display: flex;
                                flex-direction: column;
                                font-size: 12px;
                                color: #242222;
                                .fileLDItemLeftT{
                                    font-size: 16px;
                                    font-weight: bold;
                                    color: #000;
                                    padding: 10px 0;
                                }
                            }
                            .fileLDItemRight{

                            }
                        }
                    }
                }
            }

            .el-select{
                width: 100%;
            }
            .baAddRightBtm{
                position: fixed;
                bottom: 0;
                width: 100%;
                width: calc(100% - 230px);
                text-align: center;
                height: 50px;
                background-color: white;
                padding-top: 10px;
                box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.5);
            }
            
            .fileInfor{
                border-radius: 8px;
                box-sizing: border-box;
                border: 1px dashed #D1D5DB;
                min-height: 200px;
                margin: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .fileInforImg{
                    /* 自动布局子元素 */
                    width: 48px;
                    height: 48px;
                    border-radius: 9999px;

                    /* 自动布局 */
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    padding: 0px;
                    gap: 0px 0px;
                    flex-wrap: wrap;
                    align-content: center;

                    background: #EFF6FF;
                }
                .fileInforTitle{
                    margin-top: 10px;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 24px;
                    color: #111827;

                }
                .fileInforSubtitle{
                    margin-top: 10px;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 20px;
                    color: #6B7280;
                }
                .fileInforUpload{
                    margin-top: 10px;

                }
            }
            .cll{
                .cllSpan{
                    width: 350px;
                    font-size: 16px;
                    font-weight: normal;
                    line-height: 24px;
                    letter-spacing: 0px;
                    color: #6B7280;
                }
                .el-input{
                    margin-left: 20px;
                    width: calc(100% - 340px);
                }
            }
        }
       } 
    }
  </style>